import React, { useState, useEffect } from "react";
import {
  Table,
  message,
  Form,
  type FormProps,
  Input,
  Modal,
  Button,
  Space,
} from "antd";
import type { TableProps } from "antd";
import type { SearchProps } from "antd/es/input/Search";
import axios from "axios";
import "./index.css";
const { Search } = Input;
interface DataType {
  id: any;
  title: any;
  img1: any;
  img2: any;
  name: any;
  desc: any;
}

const Index: React.FC = () => {
  const [list, setList] = useState<any>([]);
  const [form] = Form.useForm();

  const render = () => {
    axios.get("/api/list").then((resp) => {
      setList(resp.data.list);
    });
  };

  useEffect(() => {
    render();
  }, []);
  const columns: TableProps<DataType>["columns"] = [
    {
      title: "序号",
      dataIndex: "id",
      key: "id",
    },
    {
      title: "标题",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "图片1",
      dataIndex: "img",
      key: "img",
      render: (_, record: any) => (
        <div>
          <img src={record.img1} />
        </div>
      ),
    },
    {
      title: "图片2",
      dataIndex: "img",
      key: "img",
      render: (_, record: any) => (
        <div>
          <img src={record.img2} />
        </div>
      ),
    },
    {
      title: "姓名",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "描述",
      dataIndex: "wei",
      key: "wei",
    },

    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => del(record)}>删除</a>
          <a onClick={() => edit(record)}>编辑</a>
        </Space>
      ),
    },
  ];

  const del = (record: any) => {
    console.log(record);
    let { id } = record;
    axios.get("/api/del", { params: { id } }).then((resp) => {
      let { code, msg } = resp.data;
      if (code == 200) {
        message.success(msg);
        render();
      }
    });
  };

  // 添加弹框
  const [isModalOpenAdd, setIsModalOpenAdd] = useState(false);
  const showModalAdd = () => {
    setIsModalOpenAdd(true);
  };

  const handleOkAdd = () => {
    setIsModalOpenAdd(false);
  };

  const handleCancelAdd = () => {
    setIsModalOpenAdd(false);
  };
  const add = () => {
    setIsModalOpenAdd(true);
  };

  const onFinishADD = (values: any) => {
    setIsModalOpenAdd(false);
    console.log(values);
    axios.put("/api/add", values).then((resp) => {
      console.log(resp);
      let { code, msg } = resp.data;
      if (code == 200) {
        message.success(msg);
        render();
      } else {
        message.error(msg);
      }
    });
  };

  // 编辑
  const edit = (record: any) => {
    console.log(record, "编辑");
    setIsModalOpenEdit(true);
    const items = form.setFieldsValue(record);
  };
  const [isModalOpenEdit, setIsModalOpenEdit] = useState(false);
  const showModalEdit = () => {
    setIsModalOpenEdit(true);
  };

  const handleOkEdit = () => {
    setIsModalOpenEdit(false);
  };

  const handleCancelEdit = () => {
    setIsModalOpenEdit(false);
  };

  const onFinishEdit = (values: any) => {
    setIsModalOpenEdit(false);
    console.log(values);
    axios.put("/api/edit", values).then((resp) => {
      let { code, msg } = resp.data;
      if (code == 200) {
        message.success(msg);
        render();
      } else {
        message.error(msg);
      }
    });
  };

  const data: DataType[] = list;
  const onSearch = (value: string) => {
    console.log(value);
    axios.post("/api/search", { val: value }).then((resp) => {
      console.log(resp);
      let { items } = resp.data;
      setList(items);
    });
  };
  return (
    <div>
      <div className="title">微脉后台管理系统</div>
      <Search placeholder="请输入搜索的内容" onSearch={onSearch} enterButton />
      <Modal
        title="编辑弹框"
        open={isModalOpenEdit}
        onOk={handleOkEdit}
        onCancel={handleCancelEdit}
      >
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          initialValues={{ remember: true }}
          onFinish={onFinishEdit}
          autoComplete="off"
          form={form}
        >
          <Form.Item
            label="序号"
            name="id"
            rules={[{ required: true, message: "Please input your title!" }]}
          >
            <Input disabled />
          </Form.Item>
          <Form.Item
            label="标题"
            name="title"
            rules={[{ required: true, message: "Please input your title!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="图片1"
            name="img1"
            rules={[{ required: true, message: "Please input your img1!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="图片2"
            name="img2"
            rules={[{ required: true, message: "Please input your img2!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="姓名"
            name="name"
            rules={[{ required: true, message: "Please input your name!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="描述"
            name="wei"
            rules={[{ required: true, message: "Please input your wei!" }]}
          >
            <Input />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              确定修改
            </Button>
          </Form.Item>
        </Form>
      </Modal>
      <Modal
        title="添加弹框"
        open={isModalOpenAdd}
        onOk={handleOkAdd}
        onCancel={handleCancelAdd}
      >
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          initialValues={{ remember: true }}
          onFinish={onFinishADD}
          autoComplete="off"
        >
          <Form.Item
            label="标题"
            name="title"
            rules={[{ required: true, message: "Please input your title!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="图片1"
            name="img1"
            rules={[{ required: true, message: "Please input your img1!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="图片2"
            name="img2"
            rules={[{ required: true, message: "Please input your img2!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="姓名"
            name="name"
            rules={[{ required: true, message: "Please input your name!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="描述"
            name="wei"
            rules={[{ required: true, message: "Please input your wei!" }]}
          >
            <Input />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              确定添加
            </Button>
          </Form.Item>
        </Form>
      </Modal>
       
      <Button type="dashed" block onClick={() => add()}>
      添加+
    </Button>
      <Table columns={columns} dataSource={data} />
    </div>
  );
};
export default Index;
